<!DOCTYPE html>
<html>
<head>
  <base target="_top">
  <style>
    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f0f2f5;
      margin: 0;
      padding: 0;
      color: #333;
    }
    .container {
      display: flex;
      max-width: 900px;
      margin: 20px auto;
      padding: 20px;
      background: #fff;
      border: 1px solid #ddd;
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    .form-section {
      flex: 1;
      margin-right: 20px;
    }
    .data-section {
      flex: 2;
    }
    h1, h2 {
      color: #2c3e50;
      margin-bottom: 20px;
    }
    .form-group {
      margin-bottom: 15px;
    }
    .form-group label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
      font-size: 14px;
      color: #333;
    }
    .form-group input[type="text"], .form-group input[type="email"] {
      width: 100%;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 14px;
      box-sizing: border-box;
    }
    input[type="button"] {
      background-color: #007bff;
      color: white;
      border: none;
      padding: 12px 20px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 20px;
      transition: background-color 0.3s;
    }
    input[type="button"].active {
      background-color: #28a745;
    }
    input[type="button"]:hover {
      background-color: #0056b3;
    }
    #tabs {
      margin-bottom: 20px;
    }
    #tabs button {
      background-color: #007bff;
      color: white;
      border: none;
      padding: 10px 15px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 14px;
      margin-right: 5px;
      transition: background-color 0.3s;
    }
    #tabs button:hover {
      background-color: #0056b3;
    }
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 20px;
    }
    th, td {
      border: 1px solid #ddd;
      padding: 10px;
      text-align: left;
      font-size: 14px;
    }
    th {
      background-color: #007bff;
      color: white;
    }
    tr:nth-child(even) {
      background-color: #f9f9f9;
    }
    tr:hover {
      background-color: #e2e6ea;
    }
    .search-group {
      margin-bottom: 15px;
    }
    #start-time, #stop-time {
      display: none;
    }
    #submit-button {
      display: none;
    }
    #tabs button {
      margin-right: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="form-section">
      <h1>OFFLINE FORM</h1>
      <input type="button" id="startTimerButton" value="Start Timer" onclick="startTimer()" style="margin-bottom: 20px;">
      <input type="button" id="stopTimerButton" value="Stop Timer" onclick="stopTimer()" style="margin-bottom: 20px;">

      <form id="dataForm">
        <div class="form-group">
          <label for="email">Email:</label>
          <input type="text" id="email" name="email" required readonly>
        </div>
        <div class="form-group">
          <label for="case-number">Case Number:</label>
          <input type="text" id="case-number" name="case-number" required placeholder="Enter case number" oninput="setStartTime()">
        </div>
        <div class="form-group">
          <label for="start-time"></label>
          <input type="text" id="start-time" name="start-time" required disabled>
        </div>
        <div class="form-group">
          <label for="stop-time"></label>
          <input type="text" id="stop-time" name="stop-time" required disabled>
        </div>
        <input type="button" id="submit-button" value="Submit" onclick="submitData()">
      </form>
    </div>

    <div class="data-section">
      <h2>DATA TABLE</h2>
      <div class="search-group">
        <label for="search-name">Search by Email:</label>
        <input type="text" id="search-name" onkeyup="filterEntries()" placeholder="Search for emails...">
      </div>
      <input type="button" value="Refresh Data" onclick="fetchData()" style="margin-bottom: 20px;">
      <div id="tabs" style="margin-bottom: 20px;"></div>
      <table id="data-table">
        <thead>
          <tr>
            <th>Email</th>
            <th>Case Number</th>
            <th>Start Time</th>
            <th>Stop Time</th>
          </tr>
        </thead>
        <tbody></tbody>
      </table>
    </div>
  </div>

  <script>
    let lastStopTime = null;
    let timerStart = null;
    let timerRunning = false;

    function setEmail(email) {
      document.getElementById('email').value = email;
    }

    function startTimer() {
      const startButton = document.getElementById('startTimerButton');
      const submitButton = document.getElementById('submit-button');
      if (!timerRunning) {
        timerStart = new Date();
        document.getElementById('start-time').value = formatTime(timerStart);
        document.getElementById('start-time').disabled = false;
        timerRunning = true;
        startButton.classList.add('active');
        submitButton.style.display = 'inline';
      }
    }

    function setStartTime() {
      const startTimeInput = document.getElementById('start-time');
      if (lastStopTime) {
        startTimeInput.value = lastStopTime;
      } else if (timerRunning) {
        startTimeInput.value = formatTime(timerStart);
      }
      startTimeInput.disabled = false;
    }

    function formatTime(date) {
      const formattedDate = `${pad(date.getFullYear(), 4)}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
      const hours = pad(date.getHours());
      const minutes = pad(date.getMinutes());
      const seconds = pad(date.getSeconds());
      const milliseconds = pad(date.getMilliseconds(), 3);
      return `${formattedDate} ${hours}:${minutes}:${seconds}.${milliseconds}`;
    }

    function pad(num, size = 2) {
      return String(num).padStart(size, '0');
    }

    function submitData() {
      const email = document.getElementById('email').value;
      const caseNumber = document.getElementById('case-number').value;

      if (!caseNumber) {
        alert('Please enter a case number.');
        return;
      }

      const stopTime = new Date();
      const formattedStopTime = formatTime(stopTime);
      lastStopTime = formattedStopTime;

      document.getElementById('stop-time').value = formattedStopTime;
      document.getElementById('stop-time').disabled = false;

      google.script.run.withSuccessHandler(fetchData).saveData(email, caseNumber, document.getElementById('start-time').value, formattedStopTime);
      document.getElementById('case-number').value = ''; 
    }

    function stopTimer() {
      if (timerRunning) {
        const stopTime = new Date();
        const formattedStopTime = formatTime(stopTime);
        lastStopTime = formattedStopTime;

        document.getElementById('stop-time').value = formattedStopTime;
        document.getElementById('stop-time').disabled = false;

        timerRunning = false;
        document.getElementById('startTimerButton').classList.remove('active');
        document.getElementById('submit-button').style.display = 'none';
      }
    }

    function displayData(data) {
      const tbody = document.querySelector('#data-table tbody');
      tbody.innerHTML = '';

      const tabsContainer = document.getElementById('tabs');
      tabsContainer.innerHTML = '';

      const emails = new Set();
      data.forEach(row => {
        const email = row[0];
        emails.add(email);

        const tr = document.createElement('tr');
        row.forEach(cell => {
          const td = document.createElement('td');
          td.textContent = cell;
          tr.appendChild(td);
        });
        tbody.appendChild(tr);
      });

      emails.forEach(email => {
        const tabButton = document.createElement('button');
      
        tabButton.textContent = email.substring(0, 6).toUpperCase(); // Display first 6 characters in uppercase

        tabButton.onclick = () => showEmailData(email, data);
        tabsContainer.appendChild(tabButton);
      });
    }

    function showEmailData(email, data) {
      const tbody = document.querySelector('#data-table tbody');
      tbody.innerHTML = '';

      const filteredData = data.filter(row => row[0] === email);
      filteredData.forEach(row => {
        const tr = document.createElement('tr');
        row.forEach(cell => {
          const td = document.createElement('td');
          td.textContent = cell;
          tr.appendChild(td);
        });
        tbody.appendChild(tr);
      });
    }

    function fetchData() {
      google.script.run.withSuccessHandler(displayData).getData();
    }

    function filterEntries() {
      const searchValue = document.getElementById('search-name').value.toLowerCase();
      const rows = document.querySelectorAll('#data-table tbody tr');

      rows.forEach(row => {
        const emailCell = row.cells[0].textContent.toLowerCase();
        row.style.display = emailCell.includes(searchValue) ? '' : 'none';
      });
    }

    google.script.run.withSuccessHandler(setEmail).getUserEmail();
    fetchData();
  </script>
</body>
</html>
